<template>
  <div class="business">
    <div class="top">
      <i class="iconfont icon-dianpu"></i>
      <span>附近商家</span>
    </div>
    <ul class="shopList">
      <li v-for="(item,index) in business"
          :key="index"
          @click="shoplistAct(item)">
        <div class="img">
          <img :src="url+item.image_path"
               alt=""
               class="pic">
        </div>
        <div class="detail">
          <p>
            <span class="brand">品牌</span>
            <span class="effect">{{item.name}}</span>
            <span class="bill_box">
              <span class="bill"
                    v-for="(items,index) in item.supports"
                    :key="index">{{items.icon_name}}</span></span>
          </p>
          <p>
            <span class="start">
              <van-rate v-model="value"
                        :size="8"
                        color="#ffd21e"
                        void-icon="star"
                        void-color="#eee"></van-rate>
              <span class="frction">{{item.rating}}</span>
            </span>
            <span class="sales">月售100单</span>

            <span class="give">
              <span class="way"> {{item.delivery_mode?item.delivery_mode.text:""}} </span>
              <span class="time">准时达</span>
            </span>
          </p>
          <p>
            <span class="pri">￥20起送 / {{item.piecewise_agent_fee.tips}} </span>
            <span class="s">
              <span class="d">{{item.distance}} /</span>
              <span class="t"> {{item.order_lead_time}} </span>
            </span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import Vue from 'vue';
import { Rate } from 'vant';
Vue.use(Rate);
export default {
  components: {

  },
  data: function () {
    return {
      value: 3,
      business: [],
      url: "//elm.cangdu.org/img/",
    }
  },
  props: ['sortDatas'],
  watch: {
    'sortDatas': {
      handler: function (newV) {
        // console.log(1111111111)
        // console.log(newV)
        this.business = newV
        // console.log(this.business)
      }
    },
    deep: true,
    immediate: true
  },
  methods: {
    shoplistAct (item) {
      localStorage.setItem('shop', JSON.stringify(item))
      localStorage.setItem('shopid', JSON.stringify(item.id))
      this.$router.push({ name: "Shop", params: item });
    }
  },
  created: function () {

    this.$axios.get('https://elm.cangdu.org/shopping/restaurants', {
      params: {
        latitude: 31.38098,
        longitude: 121.50146,
        delivery_mode: '', //配送方式id
        order_by: '',  //排序方式
        restaurant_category_id: '', //餐馆分类
        support_ids: '',  //餐馆支持特权的id
      }
    }).then(res => {
      // console.log(res)
      this.business = res.data;
      // console.log(this.business)
    }).catch(err => console.log(err));
  },
}
</script>

<style lang="less">
.business {
  margin-top: 15px;
  border-top: 1px solid #dddddd;
  background-color: white;
  .top {
    padding: 0px 5px;
    i {
      width: 16px;
      color: #999999;
    }
    span {
      font-size: 13px;
      line-height: 35px;
      color: #999999;
    }
  }
  .shopList {
    padding-bottom: 44px;
    li {
      widows: 100%;
      border-bottom: 1px solid #eeeeee;
      padding: 10px 5px 10px 10px;
    }
    .img {
      display: inline-block;
      width: 18%;
      vertical-align: 10px;
    }
    .pic {
      width: 63px;
      height: 63px;
    }
    .detail {
      display: inline-block;
      padding-left: 10px;
      width: 79%;
      p {
        line-height: 22px;
        overflow: hidden;
      }
      .brand {
        font-size: 14px;
        background-color: #ffd930;
      }
      .effect {
        font-size: 15px;
        font-weight: 700;
      }
      .bill_box {
        float: right;
      }
      .bill {
        font-size: 10px;
        color: #999999;
        border: 1px solid #eeeeee;
        border-radius: 3px;
      }
      .frction {
        font-size: 13px;
        margin-left: 10px;
        color: red;
      }
      .sales {
        font-size: 12px;
        color: #555555;
        margin-left: 7px;
      }
      .give {
        float: right;
      }
      .way {
        font-size: 12px;
        color: white;
        background-color: #3190e8;
        border-radius: 2px;
        margin-right: 1px;
      }
      .time {
        font-size: 12px;
        color: #3190e8;
        border: 1px solid #3190e8;
      }
      .pri {
        font-size: 12px;
        color: #555555;
      }
      .s {
        float: right;
      }
      .d {
        font-size: 12px;
        color: #999999;
      }
      .t {
        font-size: 12px;
        color: #3190e8;
      }
    }
  }
}
</style>